<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type"; content="multipart/form-data; charset=utf-8"/>
<meta name="author" content="order by dede58.com"/>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>写文章 - 简博客管理系统</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="apple-touch-icon-precomposed" href="images/icon/icon.jpg">
<link rel="shortcut icon" href="images/icon/icon.jpg">
<script src="js/jquery-2.1.4.min.js"></script>
<!-- Markdown -->
<link rel="stylesheet" href="css/editormd.min.css" />
<!--[if gte IE 9]>
  <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
  <script src="js/html5shiv.min.js" type="text/javascript"></script>
  <script src="js/respond.min.js" type="text/javascript"></script>
  <script src="js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 9]>
  <script>window.location.href='upgrade-browser.html';</script>
<![endif]-->
</head>

<body class="user-select">
<section class="container-fluid">
  <header>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          <a class="navbar-brand" href="/">简博客</a> </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">admin <span class="caret"></span></a>
              <ul class="dropdown-menu dropdown-menu-left">
                <li><a title="查看或修改个人信息" data-toggle="modal" data-target="#seeUserInfo">个人信息</a></li>
              </ul>
            </li>
            <li><a href="/Index/outLogin" onClick="if(!confirm('是否确认退出？'))return false;">退出登录</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <div class="row">
    <aside class="col-sm-3 col-md-2 col-lg-2 sidebar">
      <ul class="nav nav-sidebar">
        <li><a href="main.html">报告</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li class="active"><a href="article.html">文章</a></li>
        <li><a href="notice.html">公告</a></li>
        <li><a href="comment.html">评论</a></li>
        <li><a href="readermsg.html">留言</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a href="category.html">栏目</a></li>
        <li><a class="dropdown-toggle" id="otherMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">其他</a>
          <ul class="dropdown-menu" aria-labelledby="otherMenu">
            <li><a href="user-group.html">友情链接</a></li>
            <li><a href="loginlog.html">访问记录</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a class="dropdown-toggle" id="settingMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">设置</a>
          <ul class="dropdown-menu" aria-labelledby="settingMenu">
            <li><a href="setting.html">基本设置</a></li>
          </ul>
        </li>
      </ul>
    </aside>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-lg-10 col-md-offset-2 main" id="main">
      <div class="row">
          <div class="col-md-9">
            <h1 class="page-header">撰写新文章</h1>
            <div class="form-group">
              <label for="article-title" class="sr-only">标题</label>
              <input type="text" id="article-title" name="title" class="form-control" placeholder="在此处输入标题" required autofocus autocomplete="off">
            </div>
            <div class="form-group">
              <label for="article-content" class="sr-only">内容</label>
              <!-- Markdown编辑器 -->
              <div id="editormd">
                  <textarea style="display:none;" id="editor-text"></textarea>
              </div>
            </div>
            <div class="add-article-box">
              <h2 class="add-article-box-title"><span>描述</span></h2>
              <div class="add-article-box-content">
              	<textarea class="form-control" id="article-description" name="description" autocomplete="off"></textarea>
                <span class="prompt-text">描述是可选的手工创建的内容总结，并可以在网页描述中使用</span>
              </div>
            </div>
            
            
          </div>
          <div class="col-md-3">
            <h1 class="page-header">操作</h1>
            <div class="add-article-box">
              <h2 class="add-article-box-title"><span>文章状态</span></h2>
              <div class="add-article-box-content">
                <input type="radio" class="form-control" value="1" name="status" autocomplete="off">发布
                <input type="radio" class="form-control" value="0" name="status" autocomplete="off">草稿
              </div>
            </div>
            <div class="add-article-box">
              <h2 class="add-article-box-title"><span>标签</span></h2>
              <div class="add-article-box-content">
	                <input type="text" class="form-control" placeholder="输入新标签" id="article-tags" name="tags" autocomplete="off">
	                <span class="prompt-text">多个标签请用英文逗号,隔开</span> 
            	</div>
            </div>
            <form id="uploadForm" class="add-article-form" method='post' enctype='multipart/form-data'>
	            <div class="add-article-box">
	              <h2 class="add-article-box-title"><span>标题图片</span></h2>
	              <div class="add-article-box-content">
	                <input type="file" class="form-control" id="titel_image" name="title_Url" autocomplete="off">
	                <p id="title_Url_text" class="btn btn-lg btn-primary btn-block"></p>
	              </div>
	            </div>
        	  </form>

            <div class="add-article-box">
              <h2 class="add-article-box-title"><span>是否允许评论</span></h2>
              <div class="add-article-box-content">
                <input type="radio" class="form-control" value="1" name="allowcomment" checked="checked" autocomplete="off">允许
				        <input type="radio" class="form-control" value="0" name="allowcomment" autocomplete="off">不允许
              </div>
            </div>
            <div class="add-article-box">
              <div class="add-article-box-footer">
                <button class="btn btn-lg btn-primary btn-block" type="button" id="confimsubmit">发布</button>
            </div>
          </div>
      </div>
    </div>
  </div>
</section>
<script src="js/bootstrap.min.js"></script> 
<script src="js/admin-scripts.js"></script>
<script src="js/editormd.min.js"></script>
<script type="text/javascript">
	$(function(){
    /**
     * markdown实例化
     * @type {[type]}id="test-editormd"
     */
    var editor = editormd("editormd", {
      htmlDecode : "style,script,iframe", 
      height : 500,
      placeholder : "欢迎使用Markdown",
      path : "./lib/", // Autoload modules mode, codemirror, marked... dependents libs path
      saveHTMLToTextarea : true,
      emoji : true,
  	  previewTheme : "dark",       //下面这一行将使用dark主题
      watch : true,                // 开启实时预览
      tex: true,                   // 开启科学公式TeX语言支持，默认关闭
      flowChart: true,             // 开启流程图支持，默认关闭
      sequenceDiagram: true       // 开启时序/序列图支持，默认关闭,
    });


		/**
		 * 图片上传
		 */
		$("#titel_image").on("change",function(){
			var formData = new FormData(document.getElementById("uploadForm"));
			$.ajax({
		        type:"post",
		        url:"http://localhost:8081/contents/uploadImage",
		        xhrFields: {
              withCredentials: true
            },
		        async:false,
		        data:formData,// 序列化表单值
		        /**
	            *必须false才会自动加上正确的Content-Type
	            */
	            contentType: false,
	            /*
	            *
	            * 必须false才会避开jQuery对 formdata 的默认处理
	            * XMLHttpRequest会对 formdata 进行正确的处理
	            */
	            processData: false,
	            success:function (result) {
	                if(0 == result.code){
	                	$("#title_Url_text").html("图片上传成功");
	                }else{
	                	$("#title_Url_text").html("图片上传失败");
	                }
	            }
		    })
		});


	/**
	 * 发布内容
	 */
	$('#confimsubmit').on("click",function(){

      var title = $("#article-title").val();
      //获取Markdown中的内容
      var content = editor.getMarkdown();
      var description = $("#article-description").val();
      var status = $("input[name='status']:checked").val();
      var tags = $("#article-tags").val();
      var allowcomment = $("input[name='allowcomment']:checked").val();
      if (title=="") {
        alert("标题不能为空")
        return false;
      }
      if (content=="") {
        alert("请完善博客内容")
        return false;
      }
      if (description=="") {
          alert("请完善描述")
        return false;
      }
      if (status == null) {
        alert("请选择博客状态")
        return false;
      }
      if (allowcomment==null) {
        alert("是否允许评论？")
        return false;
      }
		$.ajax({
	        type:"post",
	        url:"http://localhost:8081/contents/insertBlog",
	        xhrFields:{
              widthCredentials:true
            },
	        async:false,
	        data:{
	        	"title":title,
	        	"content":content,
	        	"description":description,
	        	"status":status,
	        	"tags":tags,
                "allowcomment":allowcomment
	        },
	        success:function (result) {
	            if (0==result.code){
	                alert("发布成功");
                    window.location.href="article.html";
	            }else {
	                alert("发布失败");
	            }
	        },
	        error:function (result) {
	            alert("未知错误");
	        }
		  })
		 //获取表单提交按钮
	   var btnSubmit = document.getElementById("confimsubmit");
	   //将表单提交按钮设置为不可用，这样就可以避免用户再次点击提交按钮
	   btnSubmit.disabled= "disabled";
	   //返回true让表单可以正常提交
	   return true;
		})
	})
</script>
</body>
</html>
